<template>
  <div class="wrapper">

      
    <a-layout>
      <a-layout>
        <a-layout-sider width="285px">
             <a-menu
      :default-selected-keys="['user']"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
      class="menu"
      @click="handleClickChange"
    >
     
      <a-sub-menu key="projectList">
        <span slot="title"><a-icon type="setting" /><span>项目列表</span></span>
        <a-menu-item key="myproject">
          我的项目
        </a-menu-item>
      </a-sub-menu>
    </a-menu> 
        </a-layout-sider>
        <a-layout-content>      
            <router-view />  
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
         collapsed: false,
    };
  },
  watch: {},
  computed: {},
  methods: {
      handleClickChange(action) {
         const key = action.key;
          this.current = [key];
          this.$router.push(key);
      }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.wrapper{
    // overflow: hidden;
    // display: flex;
    .menu {
        // flex: 1;
        // box-shadow: 0px 0px 1px #ccc;
        height: calc(100vh - 60px);
        // background-color: #001529;
    }
    .content {
        width: calc(100% - 285px);
        height: calc(100vh - 60px);
        background-color: #f5f5f5;
        // background-color: #ccc;
    }
}
</style>